<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Fig. 1.46</title>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="400" style="background-color: white;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style settings to mimic the original image ---
    ctx.lineWidth = 2.5;
    ctx.font = '22px "Times New Roman"';
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.lineCap = 'round';

    // --- Helper function to draw a filled arrowhead ---
    function drawFilledArrowhead(ctx, x, y, angle, size = 12) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2.5);
        ctx.lineTo(-size, -size / 2.5);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
    
    // --- Helper function to draw an open arrowhead ---
    function drawOpenArrowhead(ctx, x, y, angle, size = 12) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2.5);
        ctx.stroke();
        ctx.restore();
    }

    // --- Coordinates ---
    const x_axis_y = 120;
    const interaction_point_x = 220;
    const interaction_point_y = x_axis_y;

    const normal_line_x = 150;
    const point_L_x = normal_line_x;
    const point_L_y = 260;

    // --- Draw Elements ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Horizontal x-axis
    ctx.beginPath();
    ctx.moveTo(40, x_axis_y);
    const xAxisEndPoint = 400;
    ctx.lineTo(xAxisEndPoint, x_axis_y);
    ctx.stroke();
    drawOpenArrowhead(ctx, xAxisEndPoint, x_axis_y, 0, 14);
    ctx.fillText('x', xAxisEndPoint + 25, x_axis_y);

    // 2. Vertical dashed line
    ctx.beginPath();
    ctx.setLineDash([6, 6]);
    ctx.moveTo(normal_line_x, point_L_y);
    ctx.lineTo(normal_line_x, x_axis_y);
    ctx.stroke();
    ctx.setLineDash([]);

    // 3. Right-angle symbol
    ctx.beginPath();
    ctx.moveTo(normal_line_x, x_axis_y - 12);
    ctx.lineTo(normal_line_x, x_axis_y);
    ctx.lineTo(normal_line_x + 12, x_axis_y);
    ctx.stroke();

    // 4. Point L
    ctx.beginPath();
    ctx.arc(point_L_x, point_L_y, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('L', point_L_x, point_L_y + 22);

    // 5. Line/Vector k
    ctx.beginPath();
    ctx.moveTo(point_L_x, point_L_y);
    ctx.lineTo(interaction_point_x, interaction_point_y);
    ctx.stroke();
    // Label 'k'
    const k_mid_x = (point_L_x + interaction_point_x) / 2;
    const k_mid_y = (point_L_y + interaction_point_y) / 2;
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('k', k_mid_x + 25, k_mid_y);
    ctx.font = '22px "Times New Roman"'; // Reset font

    // 6. Interaction point circle
    ctx.beginPath();
    ctx.arc(interaction_point_x, interaction_point_y, 4, 0, 2 * Math.PI);
    ctx.fill();

    // 7. Vector βc
    const beta_c_arrow_start_x = interaction_point_x;
    const beta_c_arrow_end_x = interaction_point_x + 90;
    ctx.save();
    ctx.lineWidth = 3.5;
    ctx.beginPath();
    ctx.moveTo(beta_c_arrow_start_x, interaction_point_y);
    ctx.lineTo(beta_c_arrow_end_x, interaction_point_y);
    ctx.stroke();
    drawFilledArrowhead(ctx, beta_c_arrow_end_x, interaction_point_y, 0, 15);
    ctx.restore();
    // Label βc
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('βc', beta_c_arrow_start_x + 45, interaction_point_y - 25);

    // 8. Angle θ
    const angle_start_rad = -Math.PI / 2; // Vertical upwards
    const angle_end_rad = Math.atan2(interaction_point_y - point_L_y, interaction_point_x - point_L_x);
    ctx.beginPath();
    ctx.arc(point_L_x, point_L_y, 35, angle_start_rad, angle_end_rad);
    ctx.stroke();
    // Label θ
    const angle_label_rad = (angle_start_rad + angle_end_rad) / 2;
    const label_r = 52;
    ctx.fillText('θ', point_L_x + label_r * Math.cos(angle_label_rad), point_L_y + label_r * Math.sin(angle_label_rad));
    ctx.font = '22px "Times New Roman"'; // Reset font

    // 9. Caption
    ctx.font = 'bold 22px "Times New Roman"';
    ctx.fillText('Fig. 1.46', canvas.width / 2, 350);

</script>

</body>
</html>